<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="infoPage">
        <info-page></info-page>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="passwordPage">
        <password-page></password-page>
      </el-tab-pane>
      <el-tab-pane label="信息查看" name="viewInfoPage">
        <view-info-page></view-info-page>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import type {TabsPaneContext} from 'element-plus'
import InfoPage from "@/components/tabs/infoPage.vue";
import PasswordPage from "@/components/tabs/passwordPage.vue";
import ViewInfoPage from "@/components/tabs/viewInfoPage.vue";

const activeName = ref('infoPage')


</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
